<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>cart</title>
    <script src="../angular.min.js"></script>
</head>
<body ng-controller="CartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity">
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove(${index})">Remove</button>
    </div>

    <hr/>

    <form ng-controller="startUpController">
        Staring: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate" />
        <br/>
        Recommendation:{{funding.needed}}
    </form>

    <script>

        function startUpController($scope){

            $scope.funding = {startingEstimate:0};

            $scope.computeNeeded = function(){
                $scope.needed = $scope.startingEstimate * 10;
            }
        }

        function CartController($scope){
            $scope.items = [
                {title:'第1本书',quantity: 8, price: 3.95},
                {title:'第2本书',quantity: 18, price: 12.00},
                {title:'第3本书',quantity: 20, price: 8}
            ];

            $scope.remove = function(index){
                $scope.items.splice(index,1);
            }
        }
    </script>
</body>
</html>